<template>
  <div>
    <div>

        <!-- 上面部分 -->
        <div class="shang">
                <!-- 头像区域 -->
            <div class="top fle itm auto">
                    <div class="tu"></div>
                    <div >
                        <div>张三</div>
                        <div>个性签名，这个人很懒，什么都没留下</div>
                    </div>
            </div>
            <!-- 头像区域 -->


            <!-- 账户分数 -->
            <div class="fle jus2">
                <div>
                    <div>999.00</div>
                    <div>账户</div>
                </div>

                <div>
                    <div>99</div>
                    <div>关注</div>
                </div>

                <div>
                    <div>99</div>
                    <div>粉丝</div>
                </div>

                <div>
                    <div>99</div>
                    <div>动态</div>
                </div>
                
            </div>
            <!-- 账户分数 -->
        </div>
        <!-- 上面部分 -->


        <!-- 下面部分 -->
        <div>
            <!-- 积分区域 -->
            <div class="fle jus2 zhon">
                <div>
                    <div>
                        <img src="../../../assets/sdhfajkl.png" alt="" width="50px" height="50px">
                    </div>
                    <div>我的积分</div>
                </div>

                <div>
                    <div>
                        <img src="../../../assets/sdhfajkl.png" alt="" width="50px" height="50px">
                    </div>
                    <div>我的订单</div>
                </div>

                <div>
                    <div>
                        <img src="../../../assets/sdhfajkl.png" alt="" width="50px" height="50px">
                    </div>
                    <div>我的预约</div>
                </div>

                <div>
                    <div>
                        <img src="../../../assets/sdhfajkl.png" alt="" width="50px" height="50px">
                    </div>
                    <div>我的收藏</div>
                </div>
            </div>
            <!-- 积分区域 -->

            <!-- 话题评论分 -->
            <div>
                <van-cell is-link title="我的话题" @click="show = true" />
                <!-- <van-action-sheet v-model="show" :actions="actions" @select="onSelect" /> -->
                <van-cell is-link title="我的评论" @click="show = true" />
                <van-cell is-link title="我的分享" @click="show = true" />
            </div>
            <!-- 话题评论分 -->

            <!-- 反馈部分 -->
            <div class="martop">
                <van-cell is-link title="常见问题" @click="show = true" />
                <van-cell is-link title="意见反馈" @click="show = true" />
                <van-cell is-link title="设置" @click="show = true" />
            </div>
            <!-- 反馈部分 -->


        </div>
        <!-- 下面部分 -->


    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            show:true
        }
    }

}
</script>

<style lang="less" scoped>

.fle{
    display: flex;
}
.itm{
    align-items: center;
}
.jus{
    justify-content: space-between;
}
.top{
    width: 390px;
    height: 100px;
}
.tu{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #FFFFFF;
}
.shang{
    width: 390px;
    height: 200px;
    background-color: skyblue;
}
.zhon{
    width: 380px;
    height: 100px;
    background-color: #FFFFFF;
    margin:  auto;
    margin-top: -20px;
}
  .content {
    padding: 16px 16px 160px;
  }

.martop{
    margin-top: 10px;
}

.auto{
    justify-content: center;
}
.jus2{
    justify-content: space-around;
}
</style>